style: Update panel_button mixin to have HighContrast support

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3076>

diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index cbd53c23ed1831f9f32d9681884d49876b08bf01..c852fc38f370e35598166b6dd6876fa5fb61b40d 100644 (file)
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -406,7 +406,8 @@
 @mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $flat: true, $highlighted_child: false, $child_class:"") {
 
   transition-duration: 150ms;
-  border: 3px solid transparent;
+  margin: 3px;
+  border: 1px solid transparent;
   border-radius: $forced_circular_radius;
 
   font-weight: bold;
@@ -417,49 +418,65 @@
     box-shadow: none;
 
     &:active, &:focus, &:checked {
-      box-shadow: inset 0 0 0 100px transparentize($fg, 0.75);
+      background-color: transparentize($fg, 0.75);
       &:hover {
-        box-shadow: inset 0 0 0 100px transparentize($fg, 0.65);
+        background-color: transparentize($fg, 0.65);
       }
     }
 
     &:hover {
-      box-shadow: inset 0 0 0 100px transparentize($fg, 0.8);
+      background-color: transparentize($fg, 0.8);
     }
 
   } @else {
-    box-shadow: inset 0 0 0 100px transparentize($bg, 0.2);
+    background-color: transparentize($bg, 0.2);
+
+    @if $is_highcontrast {
+      border-color: $hc_inset_color;
+    }
 
     &:active, &:focus, &:checked {
-      box-shadow: inset 0 0 0 100px $bg;
+      background-color: $bg;
       &:hover {
-        box-shadow: inset 0 0 0 100px transparentize($bg, 0.05);
+        background-color: transparentize($bg, 0.05);
       }
     }
 
     &:hover {
-      box-shadow: inset 0 0 0 100px transparentize($bg, 0.1);
+      background-color: transparentize($bg, 0.1);
+    }
+  }
+
+  @if $is_highcontrast {
+    &:hover, &:active, &:focus, &:checked {
+      border-color: $hc_inset_color;
     }
   }
 
   // some overrides to style a child element
   @if $highlighted_child {
-    box-shadow: none !important;
+    background: none !important;
+    border: none !important;
 
     #{$child_class} {
       transition-duration: 150ms;
-      border: 3px solid transparent;
       border-radius: $forced_circular_radius;
+
+      // use box-shadow instead of border
+      @if $is_highcontrast {
+        box-shadow: inset 0 0 0 1px $hc_inset_color;
+      }
     }
 
-    &:active, &:focus, &:checked {
+    &:active, &:focus {
+      background: none;
       box-shadow: none !important;
 
       #{$child_class} {
-        box-shadow: inset 0 0 0 100px transparentize($fg, 0.75);
+        background-color: transparentize($fg, 0.75);
 
         &:hover {
-          box-shadow: inset 0 0 0 100px transparentize($fg, 0.65) !important;
+          background-color: transparentize($fg, 0.65) !important;
         }
       }
     }
@@ -467,7 +484,7 @@
     &:hover {
       box-shadow: none !important;
       #{$child_class} {
-        box-shadow: inset 0 0 0 100px transparentize($fg, 0.8);
+        background-color: transparentize($fg, 0.8);
       }
     }
   }

diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss
index eb6715e988edd56368bf0c1dc27f56ca913a6263..6a5fdc8bef1a7a43dd6d92d893366e1c13430081 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_panel.scss
+++ b/data/theme/gnome-shell-sass/widgets/_panel.scss
@@ -30,7 +30,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
     // status area icons
     .system-status-icon {
       icon-size: $scalable_icon_size;
-      padding: $base_padding;
+      padding: 0 $base_padding;
       margin: 0 $base_margin;
     }